<template>
  <PageContainer>
    <view class="container">
      <Header v-model:model-value="headerHeight" title="大屏管理" :is-box-shadow="false">
        <view>
          <view style="padding: 16rpx 32rpx; height: 72rpx">
            <TSearch placeholder="搜索姓名/单位" @confirm="searchFnc" />
          </view>
        </view>
      </Header>
      <view class="bg" :style="{ position: 'sticky', top: headerHeight + 'px',zIndex:9999 }">
        <view class="currently-displayed">
          <view class="title">
            <text>正在展示</text>
            <TButton
              text="刷新资料"
              :customStyle="{
                borderRadius: '24rpx',
                background: '#2878FF',
                color: '#FFF',
                fontSize: '24rpx',
                lineHeight: '48rpx',
                height: '48rpx',
                width: '128rpx',
              }"
              @click="handleRefresh"
            />
          </view>
          <view>
            <ShowUser :data="currentlyDisplayedUser" :configType="bigScreenConfig?.configType">
              <template #rightTop>
                <view class="right-top">展示中</view>
              </template>
            </ShowUser>
          </view>
        </view>
        <view class="waiting-to-display">
          <view class="title">等待展示</view>
        </view>
      </view>
      <!-- <view :style="{ height: headerHeight + 'px' }"></view> -->
      <view class="show-list">
        <view class="waiting-to-display">
          <view>
            <Paglist
              v-model="dataList"
              :is-init-api="false"
              :parame="parame"
              @register="register"
              :scroll-top-bottom="260"
              :is-show-loadmore="dataList.length >= 1"
              :isPullDownRefres="false"
            >
              <template v-for="v in dataList" :key="v.id">
                <view class="content">
                  <ShowUser :data="v">
                    <template v-if="bigScreenConfig?.configType === ShowModeEnum.Manual" #action>
                      <view class="action" @click="handleSetShowRegisterInfo(v)">上屏展示</view>
                    </template>
                  </ShowUser>
                </view>
              </template>
            </Paglist>
          </view>
        </view>
      </view>
      <TButtonGroup :styles="{ backgroundColor: '#FFF' }">
        <TButton
          v-if="bigScreenConfig"
          class="gutter-btn"
          :text="`切换${
            showModeDescriptions[
              bigScreenConfig.configType === ShowModeEnum.Auto
                ? ShowModeEnum.Manual
                : ShowModeEnum.Auto
            ]
          }`"
          :customStyle="{ border: '2rpx solid #C8CACC', borderRadius: '44rpx' }"
          @click="handleSwitchingMode"
        />
        <!-- <TButton
          v-if="bigScreenConfig?.configType === ShowModeEnum.Manual"
          class="gutter-btn"
          text="下一位"
          :customStyle="{ border: '2rpx solid #C8CACC', borderRadius: '44rpx' }"
          @click="handleSetShowRegisterInfo(dataList[0])"
        /> -->
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* bigScreenManagement 大屏管理 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { onLoad } from '@/router';
  import ShowUser from './components/ShowUser.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type {
    IActivityRegister,
    IActivityRegisterQuery,
    IBigScreenConfig,
  } from '@/api/activity/types';
  import { provide, ref } from 'vue';
  import {
    getBigScreenConfig,
    getShowRegisterInfo,
    getShowRegisterList,
    setRedisActivityBIRegisterList,
    setShowRegisterInfo,
    switchingMode,
  } from '@/api/activity';
  import { Toast } from '@/utils';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { showModeDescriptions, ShowModeEnum } from '@/enums/activityStatusEnum';
  import { onPullDownRefresh } from '@dcloudio/uni-app';

  onLoad<'bigScreenManagement'>(async (op) => {
    parame.value.activityId = op.activityId;
    await queryBigScreenConfig();
    refresh();
    queryShowRegisterInfo();
  });

  const headerHeight = ref(0);

  const searchFnc = (keyWord: string) => {
    parame.value.keyWord = keyWord;
    refresh();
  };
  const [register, { refresh }] = useConList();
  const dataList = ref<IActivityRegister[]>([]);
  const parame = ref<IActivityRegisterQuery>({
    activityId: 0,
    keyWord: '',
  });
  provide('api', async (obj: IActivityRegisterQuery) => {
    const res = await getShowRegisterList(obj);
    return res;
  });
  const currentlyDisplayedUser = ref<IActivityRegister>();
  const queryShowRegisterInfo = async () => {
    const res = await getShowRegisterInfo(parame.value.activityId);
    currentlyDisplayedUser.value = res[0];
  };

  const handleSetShowRegisterInfo = async (v: IActivityRegister) => {
    await setShowRegisterInfo(parame.value.activityId, v.id);
    Toast('切换成功！');
    queryShowRegisterInfo();
    // refresh();
  };

  const handleSwitchingMode = async () => {
    let switchingModeVal = ref<ShowModeEnum>();
    let switchingModeText = ref('');
    if (bigScreenConfig.value?.configType === ShowModeEnum.Manual) {
      switchingModeVal.value = ShowModeEnum.Auto;
      switchingModeText.value =
        '确定要将大屏展示切换成自动模式吗？自动模式将会系统自动按列表顺序轮播展示';
    } else {
      switchingModeVal.value = ShowModeEnum.Manual;
      switchingModeText.value =
        '确定要将大屏展示切换成手动模式吗？手动模式将需要您手动点击展示，并且需要手动切换展示下一位。';
    }
    uni.showModal({
      content: switchingModeText.value,
      confirmText: '确定切换',
      cancelText: '取消',
      title: `切换成${showModeDescriptions[switchingModeVal.value]}`,
      success: async (res) => {
        if (res.confirm) {
          await switchingMode(parame.value.activityId, switchingModeVal.value!);
          await queryBigScreenConfig();
          queryShowRegisterInfo();
          refresh();
          Toast('切换模式成功！');
        }
      },
    });
  };

  const bigScreenConfig = ref<IBigScreenConfig>();
  const queryBigScreenConfig = async () => {
    bigScreenConfig.value = await getBigScreenConfig(parame.value.activityId);
  };

  onPullDownRefresh(async () => {
    handleRefresh();
  });

  const handleRefresh = async () => {
    await setRedisActivityBIRegisterList(parame.value.activityId);
    await queryBigScreenConfig();
    refresh();
    queryShowRegisterInfo();
    Toast('刷新成功');
  };
</script>

<style lang="scss" scoped>
  .container {
    background: #f2f3f5;
    padding-bottom: 50rpx;
    .bg {
      background: #f2f3f5;
      padding: 24rpx 0;
    }
    .show-list {
    }
    .currently-displayed,
    .waiting-to-display {
      padding: 0 24rpx;
      .title {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
        line-height: 56rpx;
      }
      ::v-deep .list-box {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
      }
    }
    .currently-displayed {
      margin-bottom: 24rpx;
      .title {
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .right-top {
        white-space: nowrap;
        border-radius: 4rpx;
        border: 1rpx solid #ea5e0e;
        padding: 0px 8rpx;
        color: #ea5e0e;
        font-size: 20rpx;
        line-height: 28rpx;
      }
    }
    .waiting-to-display {
      .action {
        padding: 8rpx 16rpx;
        border-radius: 24rpx;
        border: 2rpx solid #2878ff;
        color: #2878ff;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
  }
</style>
